<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		 <script src="../js/app.js"></script>
<!--<link rel="stylesheet" href="css/message.css" type="text/css" />-->
		 		<script src="../js/jquery-3.3.1.js"></script>
		 		<style type="text/css">
		 			.mui-content{
		 				margin-bottom: 40px;  
		 			}
		 			/*body {font-family: sans-serif;}*/
		 			#show_messagea li{
		 				background: #fff;
		 				padding:5px 5px 0 5px;
		 			}
		 			#show_messagea{
		 				background: #FAFAFA;
		 			/*#show_messagea img{
		 				/*background: #FAFAFA;*/
		 				/*padding:5px 5px 0 5px;*/
		 				
		 			}
		 			.mui-media-body{
		 				
		 				/*background: #F3F3F3;*/
		 				/*padding:5px 5px 0 5px;*/
		 				border-radius:10px;
		 				font-size: 16px;
		 				line-height:120%;
		 				margin : 0px 2px 2px 5px;
		 			}
		 			.p1{
		 				color: #000000;
		 				font-size: 20px;
		 				/*letter-spacing:0.1em;*/
		 				/*text-indent:2em;*/
		 				/*padding:0 0.1em;*/
		 				padding: 3px;
		 			}
		 			.p2{
		 				/*margin : 0px 2px 10px 55px;*/
		 				/*background: #EFEFF4;*/
		 				padding:0 0px 0 62px;
		 				border-radius:5px;
		 			}
		 			a{ text-decoration:none;
    color:#222222;}
		 		</style>
</head>
<script type="text/javascript">
	//定义变量——————————————————————————————————
var chatkey = localStorage.getItem("chatkey"); //当前好友数据表名
userjson = localStorage.getItem(chatkey); //好友信息json字符串
userbiao= eval('(' + userjson + ')');//转换成json对象
var myurl = "http://192.168.1.107/index/home/tongxun/muiapi/";
var mname= "大龙了";//我的名字
var mid="1";
uname= userbiao.user_name;//好友名字
uid= userbiao.user_id;//好友id
mtimg="15153046091299470971.jpg";//我的头像图片
utimg=userbiao.timg;//好友的头像图片
url="http://192.168.1.107/public/uploads/shop/";//图片地址路径//头像图片路径
messageid="0";
ckey="message"+uid;//聊天记录表名
var kval;//聊天记录值进行json格式化
if(!localStorage.getItem(ckey)){
//  localStorage.setItem(ckey,"");
	localStorage.setItem("num"+ckey,0);
}
userjson = localStorage.getItem(chatkey); //好友信息json字符串
userbiao= eval('(' + userjson + ')');//转换成json对象

//localStorage.removeItem(ckey);//清空数据



function addb(){

            $.ajax({ 
                type: "GET",//请求方式
                url: myurl+"getdata.php?p=0.1&uid="+uid,//地址，就是json文件的请求路径
                // data: {"p":$("#p").val(),"user":user},
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　success: function(result)
               {
               cundata(result,5);
                //     // addBoxb(result);
                } });
        };
         //页面加载   获取历史全部信息
         function adda(){
//           sublodopen();//开启出现加载圈圈
            $.ajax({ 
                type: "GET",//请求方式
                url: myurl+"getdataa.php?p="+$("#p").val()+"&uid="+uid,//地址，就是json文件的请求路径
                // data: {"p":$("#p").val(),"user":user},
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
               cundata(result,5);//
               addBoxa(result);//推送给当前浏览器显示页面
                                            }
                   });
        }
//        localStorage.removeItem(ckey);//清空数据/
//document.getElementById("show_messageb").innerHTML="数据库内字符串未加工";
//chaku();
function chaku(){
	kval = localStorage.getItem(ckey);  //取出数据库原值
	//document.getElementById("show_messageb").innerHTML="数据库最终值"+localStorage.getItem(ckey);
	if(kval==null || kval=="" || kval=="null"||kval==false)
                 {
                 	adda();//\如果本地聊天记录为空将会调取服务器最近数据
                 	//检测数据库是否为空,
                 }else{
          result=  eval("( ["+kval+"] )") ;//把数据库取出的字符串改造换成json数组
          addBoxa(result);//把数组传给遍历窗口展现出来
                 }
}
var mnum =10;//聊天记录保存本地数量
var result;//json数组
        function cundata(result,mnum){//存入本地数据库	
//        	var mnum =2;//聊天记录保存本地数量
        	 var sms = (JSON.stringify(result));
        	 if (sms!="[]") {
                    // alert("更新数据！"+b)              
        	  var p = document.getElementById("p");//聊天记录页数显示
                  p.value = parseInt(p.value) + 1;//每获取一次数据 input翻页数加1;
sms=sms.trim('[', 'left'); 
sms=sms.trim(']', 'right'); // 去除字符串右侧字符 
   kval = localStorage.getItem(ckey);  //取出数据库原值
//document.getElementById("show_messageb").innerHTML="数据库内字符串未加工"+kval;
                 if(kval==null || kval=="" || kval=="null"||kval==false)
                 {
                 	localStorage.setItem(ckey,sms);
                 	//检测数据库是否为空,如果是空将服务器改造后的字符串数据存入.
                 	
                 }else{
                kobj=  eval("( ["+kval+"] )") ;//把数据库取出的字符串改造换成json数组
//      document.getElementById("show_messagec").innerHTML="数据库取出改造成json数组"+kval
                 	if(kobj.length>mnum){//判断数据库内数据条数是否超过3条
var mess ="";
for (var i = 0; i < mnum; i++) 
{
	//取数据库里最后的三条数据
mess+='{"id":"'+kobj[i].id+'","addtime":"'+kobj[i].addtime+'","user_ida":"'+kobj[i].user_ida+'","message":"'+kobj[i].message+'"},';
}
mess=mess.trim(',', 'right'); // 去除字符串右侧多余字符 

localStorage.setItem(ckey,sms+","+mess); //存储原有数据值删除旧数据+新获取的值
                 	}else{
localStorage.setItem(ckey,kval+","+sms); //存储原有数据值+逗号+新获取的值	

//addBoxa(result);//将内容显示
                 }
                 } }else{
                      alert("对不起没有更多数据！");
//                     sublodend();//加载完成后圈圈图片关闭方法
                    }}
                    
        function addBoxa(result)
         {
            //result是一个集合,所以需要先遍历然后更新全部
            $.each(result,function(index,obj)
            {

                    if (obj['user_ida']==mid) {
                          name='我';
                            color="";
                            timg=mtimg
                        }else{
                        	timg=utimg
                          name=uname;
                            color="background: #EFEFF4;";
                        }
                $("#show_messagea").prepend(//获得图片地址
                    "<li><img class='mui-media-object mui-pull-left' src='"+url+timg+"'/>"+
                    //获得名字
                    "<div class='mui-media-body'><p class='mui-media-body p1' style='"+color +";'> min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 "+obj['message']+
                    //获得邮箱地址
                    "</p><p  class='mui-ellipsis p2'>"+obj['addtime']+"<span style='panding-left:30px'>"+name+"</span></p></div></li>");
            }    );
//           sublodend();//加载完成后圈圈图片关闭方法
               ZTop();
        }

     function addBoxb(result)
    { 

            	
                    if (obj['user_ida']==mid)
                    {
                          name='我';
                            color='#98FB98';
                            timg=mtimg;
                    }else{
                    	timg=utimg;
                          name=uname;
                            color='#fff';
                        }
                $("#show_messagea").append(//获得图片地址
                    "<ul mui-table-view><li class='mui-table-view-cell mui-media'><img class='mui-media-object mui-pull-left' src='"+url+obj['url']+"'/>"+
                    //获得名字
                    "<div class='mui-media-body'>"+name+obj['id']+obj['message']+
                    //获得邮箱地址
                    "<p  class='mui-ellipsis'>"+obj['addtime']+"</p></div></li></ul>");
             var n = document.getElementById("num");//聊天记录页数显示
                 n.style.display="block";//获取数据开启消息提醒
                 n.value = parseInt(n.value) + 1;//每获取一次数据 input翻页数加1;
              }
//  );}
   
$("#ckq").keydown(function(e){    //按下键盘触发函数
                if(e.keyCode==13){            //如果按下的是回车
                  add();  
                }
            });
function add()
    {
        if ($("#ckq").val() == "" || $("#ckq").val() == " " || $("#ckq").val() == false)
                {alert("内容不能为空");
        }else{
          abc();//把发布的内容输出给当前页面展示
             
            }
    }

var currentPosition,timer; 
function GoTop(){ 
    //回到顶部
timer=setInterval("runToTop()",1); 
} 
function runToTop(){ 
    //滚动到顶部
currentPosition=document.documentElement.scrollTop || document.body.scrollTop; 
currentPosition-=10; 
if(currentPosition>30) 
{ 
window.scrollTo(0,currentPosition); 
} 
else 
{ 
window.scrollTo(0,300); 
clearInterval(timer); 
} 
} 

function ZTop(){//滚动条到上300位置
window.scrollTo(0,300); 

}
function TTop(){//回到底部
window.scrollTo(0,document.body.scrollHeight); 
}

//加载时候出现个圈圈
function sublodopen(){//开始出现圈圈图片方法
document.getElementById('quanquanimg').style.display=''

}
function sublodend(){//加载完成后圈圈图片关闭方法
document.getElementById('quanquanimg').style.display='none'

}

function abc(){
    var now = new Date();         
        // var year = now.getFullYear();       //年  
        // var month = now.getMonth() + 1;     //月  
        // var day = now.getDate();            //日  
          
        var hh = now.getHours();            //时  
        var mm = now.getMinutes();          //分  
        var ss = now.getSeconds();           //秒  
        var time= hh+"点"+mm+"分"+ss+"秒";
       
 $.post(myurl+"/insert.php", {message:$("#ckq").val(),user_idb:uid},

function(result){
    if (!result) {
        $("#show_messageb").append("<div class='spbc' style='background:red;width:100%'><span>！！！您刚刚在"+result+time+"发出的数据，发送失败！请检查您的网络。</span></div>");
        // alert("成功"+result);
    }
   });//这个json 是请求返回数据类型，不写的话默认是字符串类型
        // TTop();
//这个json 是请求返回数据类型，不写的话默认是字符串类型
$("#show_messagea").append("<li><img class='mui-media-object mui-pull-left' src='"+url+mtimg+"'/>"+
                    //获得名字
                    "<div class='mui-media-body'><p class='mui-media-body p1' >"+$("#ckq").val()+
                    //获得邮箱地址
                    "</p><p  class='mui-ellipsis p2'>"+time+"<span style='panding-left:30px'>"+name+"</span></p></div></li>");
    $("#ckq").val('');//清空留言框内容;

        // $.ajax({
        //         url: "chat.php",
        //         type: "post",
        //         async: false,
        //         data: {"message":$("#ckq").val(),"user_idb":+uid}
        //     },);
        TTop();
        // $("#ckq").val('');
};
</script>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">标题</h1>
    </header>
    <div class="mui-content mui-table-view">
    	<input type="submit" id="p" readonly="readonly" name="p" value="1"onclick="addOne();" >
<!--         <input type="submit" id="Two" value="回到底部" onclick="TTop()"> -->
        <input type="submit" id="Two" value="去底部"  onclick="TTop()">
        <input type="submit" id="btn2" value="更多历史记录" onclick="adda();">
<ul class="mui-table-view" id="show_messagea"></ul>
	<ul class="mui-table-view" id="show_messageb"></ul>
		<ul class="mui-table-view" id="show_messagec"></ul>


</div>
<nav class="mui-bar mui-bar-tab" style="height: 30px;">
    <div class="mui-input-row">
            <label><input style="padding: 6px;font-size: 20px;"  type="submit" onclick="add();"></label>
            <input id="ckq" style="padding:1px;font-size: 20px;" type="text"  class="mui-input-speech mui-input-clear" placeholder="语音输入">
        
    </div>
</nav>
<script type="text/javascript">
//document.getElementById("show_messagea").innerHTML=localStorage.getItem(ckey);
	chaku();
	TTop();
//var uname =chatkey;
//userjson = localStorage.getItem(uname); 
//userbiao=eval('(' + userjson + ')');
//var bToObj=console.log(userbiao.user_id);
//var bToObj=userbiao;
//console.info("--->" + json2['name']);
//		userbiao="fdsfds";
//	$.each(JSON.parse(userbiao),function(index,obj)
//			{
//				
//				uid= "{"+obj['user_id']+","+obj['user_name']+"}";
////				$("#friend-list").html("<ul id='hang' class='hang'><a><li class='friend-hang-lia'><img src='"
////			+src+obj['timg']+"'></li> <li class='friend-hang-lib'>"+obj['user_name']+"</li></a></ul>");
//			$("#show_messagea").append("<ul onclick='duihua()' id='hang' class='hang'><a><li class='friend-hang-lia'><img src='"
//			+src+obj['timg']+"'></li> <li class='friend-hang-lib'>"+obj['user_name']+"</li></a></ul>");
//			}    );
//var chatkey1 = localStorage.getItem("num"+ckey); //当前好友数据表名
//var chatkey = localStorage.getItem("me"); //当前好友数据表名
//userjson = localStorage.getItem(chatkey); //好友信息json字符串
//userbiao= eval('(' + userjson + ')');//转换成json对象
var kval//聊天记录
var userjson //好友信息
//document.getElementById("ckq").innerHTML=chatkey1;
//	document.getElementById("ckq").placeholder=chatkey;

//	kval=localStorage.getItem(ckey);
//var pr=	"[ "+kval+" ]";
//var pr=	JSON.parse(pr);
//	document.getElementById("show_messagea").innerHTML=kval;
//var sms = eval('([' + kval + '])');
//	color="#fff ";
//for(var i=0;i<sms.length;i++){
//	chatkey1="<li><img class='mui-media-object mui-pull-left' src='"+url+utimg+"'/><li  class='mui-ellipsis'><span>"+uname+sms[i].id+":</span></li>"+
//                  //获得名字
//                  "<div class='mui-media-body'> 指示客户机可以接收响应时间小于当前时间加上指定时间的响应指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息"+sms[i].message+"</li></div><li><p class='mui-ellipsis'>"+sms[i].addtime+"<span>"+uname+sms[i].id+"</p></li>"; //当前好友数据表名
////$("#show_messagea").append(chatkey1);
////document.getElementById("show_messagea").innerHTML=chatkey1;
//}
//$("#show_messagea").append(sms.length-3);
//var chatkey1="";
//var chatkey3="";
//if(sms.length>0){ 
//for (var i = sms.length - 1; i >= sms.length - 3 && i >= 0; i--) { 
//chatkey1+="<li>"+sms[i].message+"</li>";
//chatkey3+='{"id":"'+sms[i].id+'","addtime":"'+sms[i].addtime+'","message":"'+sms[i].message+'"}';
////document.getElementById("show_messagea").innerHTML=chatkey1;
//}
//}
//localStorage.setItem("num"+ckey,knum);
//document.getElementById("show_messagea").innerHTML=kval;
//var chatkey2="";
//smsa =Array(chatkey3);
//for(var i=0;i<smsa.length;i++){
//	chatkey2+="<li>"+smsa[i].message+"</li>";
//}
//document.getElementById("show_messagea").innerHTML=chatkey3;
//document.getElementById("show_messagea").innerHTML=chatkey3;
//console.log(arr);
//$("#show_messagea").append(arr1);

//$("#show_messagea").append(xqo_3.length);
</script>
</body>